<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';
import { GUIDE_TYPE, guideTypeList } from '@/enums/exam.enums';
import { currRoute } from '@/utils/router.utils';
import Map from './components/map.vue';

const { query } = currRoute();

const activeTab = ref<GUIDE_TYPE>(Number(query.type) as GUIDE_TYPE || GUIDE_TYPE.DEPARTMENT_LOCATION);

// 血液标本采集指引步骤数据
const sampleCollectionSteps = [
  {
    number: 1,
    title: '准备工作',
    desc: '请提前取下袖口较紧的衣物，露出肘部，放松手臂肌肉。'
  },
  {
    number: 2,
    title: '信息核对',
    desc: '护士会核对您的姓名和检查项目，请主动配合确认。'
  },
  {
    number: 3,
    title: '标本采集',
    desc: '采集过程中请保持手臂稳定，如有不适请立即告知护士。'
  },
  {
    number: 4,
    title: '按压止血',
    desc: '采血完成后请用棉签按压穿刺点5-10分钟，不要揉搓。'
  },
  {
    number: 5,
    title: '注意事项',
    desc: '采血后24小时内保持穿刺点清洁干燥，避免剧烈运动。'
  }
];

function handleChangeTab(type: GUIDE_TYPE) {
  activeTab.value = type;
}
</script>

<template>
  <view class="exam-guide flex-col">
    <AuthBar back-home />
    <view class="h-0 flex-col flex-1 overflow-auto">
      <view class="page-title mt-38">
        检查引导
      </view>

      <view class="exam-guide__tabs mt-44 flex px-48 pt-17">
        <view v-for="item in guideTypeList.list" :key="item.value">
          <view
            class="exam-guide__tab" :class="{ active: activeTab === item.value }"
            @click="handleChangeTab(item.value)"
          >
            {{ item.label }}
          </view>
          <view v-if="activeTab === item.value" class="exam-guide__active-icon">
            <i class="iconfont icon-aohu" />
          </view>
        </view>
      </view>

      <view class="exam-guide__content h-0 flex-1 overflow-auto pt-20">
        <!-- 科室位置 -->
        <view v-if="activeTab === GUIDE_TYPE.DEPARTMENT_LOCATION" class="department-location h-full flex-col pb-50">
          <view class="map-label__block">
            <view class="map-label">
              检验科
            </view>
            <view class="map-label__address">
              3楼 · 东侧
            </view>
          </view>

          <view class="my-33 pl-48">
            <view class="map-location">
              <wd-icon name="location" size="32px" /> 当前位置
            </view>
          </view>

          <view class="map-container mx-48 flex-1">
            <Map />
          </view>
        </view>

        <!-- 标本采集指引 -->
        <view v-if="activeTab === GUIDE_TYPE.SAMPLE_COLLECTION_GUIDANCE" class="box-border h-full px-48 pb-48">
          <view class="sample-collection-guide px-48 py-40">
            <view class="guide-header mb-40">
              <view class="guide-title">
                血液标本采集指引
              </view>
              <view class="guide-subtitle">
                请按照以下步骤配合完成标本采集
              </view>
            </view>

            <view class="guide-steps">
              <view v-for="step in sampleCollectionSteps" :key="step.number" class="guide-step">
                <view class="flex-col items-center">
                  <view class="step-number my-12">
                    {{ step.number }}
                  </view>
                  <view class="step-line flex-1" />
                </view>
                <view class="step-content">
                  <view class="step-title">
                    {{ step.title }}
                  </view>
                  <view class="step-desc">
                    {{ step.desc }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '检查引导',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.exam-guide {
  height: 100%;
  background: var(--bg-color);

  .page-title {
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    color: var(--text-color);
  }

  .exam-guide__tabs {
    background: linear-gradient(180deg, #d8e7ff 40%, #afceff 100%);

    .exam-guide__tab {
      border-radius: 10px;
      background: rgba(247, 250, 254, 0.5);
      color: rgba(0, 0, 0, 0.88);
      border: 2px solid rgba(255, 255, 255, 0.5);
      padding: 12px 42px;
      font-size: 30px;
      margin-right: 20px;

      &.active {
        color: var(--primary);
        font-weight: 800;
        background: #fff;
      }
    }

    .exam-guide__active-icon {
      text-align: center;

      .iconfont {
        font-size: 32px;
        color: var(--primary);
      }
    }
  }

  .exam-guide__content {
    box-sizing: border-box;

    .department-location {
      box-sizing: border-box;

      .map-label__block {
        background: rgba(235, 243, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.5);
        padding: 17px 0 14px 47px;

        .map-label {
          color: var(--text-color);
          font-size: 36px;
          font-weight: bold;
        }

        .map-label__address {
          font-size: 28px;
          color: #3d3d3d;
        }
      }

      .map-location {
        background: rgba(247, 250, 254, 0.5);
        color: var(--primary);
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 100px;
        font-size: 32px;
        display: inline-block;
        padding: 4px 27px;
      }

      .map-container {
        background: #c9e1ff;
        border-radius: 20px;
        border: 2px solid #e6effd;
        box-sizing: border-box;
        overflow: hidden;
      }
    }

    .sample-collection-guide {
      box-sizing: border-box;
      background: #e2ecfc;
      border-radius: 20px;

      .guide-header {
        .guide-title {
          font-size: 42px;
          font-weight: bold;
          color: var(--text-color);
        }

        .guide-subtitle {
          font-size: 24px;
          color: #6f6f6f;
        }
      }

      .guide-steps {
        .guide-step {
          display: flex;

          .step-number {
            @apply flex-center;

            width: 84px;
            height: 84px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            font-size: 50px;
            font-weight: bold;
            flex-shrink: 0;
          }

          .step-line {
            width: 1px;
            background: var(--primary);
          }

          .step-content {
            flex: 1;
            padding-bottom: 90px;
            margin-left: 24px;

            .step-title {
              font-size: 36px;
              font-weight: bold;
              color: #3d3d3d;
              margin-bottom: 12px;
            }

            .step-desc {
              font-size: 28px;
              color: #6f6f6f;
            }
          }

          &:last-child {
            .step-content {
              padding-bottom: 0;
            }
          }
        }
      }
    }
  }
}
</style>
